<template>
  <div class="douyin">

    <div class="center">
      <left></left>
      <div class="right">

        <top></top>
        <div class="hei10"></div>
        <div style="padding: 20px; display: flex; align-items: center; cursor: pointer;" @click="$router.back(-1)">
          <i class="el-icon-arrow-left" style="margin-right: 10px;"></i> 省外订单队列
        </div>

        <div class="kflexc" style="padding: 20px;">
          <div style="font-size: 12px;">
            时间范围:
            <el-date-picker style="margin-right: 20px; width: 470px;" v-model="times" @change="timeschange"
              value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>
          <el-input style="width: 250px;margin-right: 20px;" v-model="form.goods_name" placeholder="商品"></el-input>
          <el-input style="width: 250px;margin-right: 20px;" v-model="form.share_name" placeholder="分销商"></el-input>
          <el-input style="width: 250px;margin-right: 20px;" v-model="form.source" placeholder="订单来源"></el-input>
          <el-button type="danger" round @click="search()">搜索</el-button>
          <!-- <el-button type="danger" round @click="daoru()">导入</el-button> -->
          <el-button type="danger" style="margin-right: 10px;" round @click="daochu()">导出</el-button>
          <UploadExcelComponent :buttonName="'导入'" @on-selected-file="daoru"></UploadExcelComponent>
          <div @click="xiazai" style="margin-left: 10px; cursor: pointer; font-size: 12px; color: rgb(3, 120, 241);">模版</div>
        </div>

        <div class="con" v-loading="loading" style="margin:0 20px; ">

          <el-table :data="list" style="text-align: center;" align="center" border :loading="loading">
            <el-table-column label="订单ID">
              <template slot-scope="scope">
                <span>{{ scope.row.order_id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单来源">
              <template slot-scope="scope">
                <span>{{ scope.row.source }}</span>
              </template>
            </el-table-column>
            <el-table-column label="分销商">
              <template slot-scope="scope">
                <span>{{ scope.row.share_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提单/创建时间">
              <template slot-scope="scope">
                <span>{{ scope.row.created_at }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                <span>{{ scope.row.goods_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品编码">
              <template slot-scope="scope">
                <span>{{ scope.row.goods_sku }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-button type="text" @click="deletes(scope.row.order_id)">立刻提单</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 20px; justify-content: flex-end;" class="flexc">
            <el-pagination style=" text-align: right;" background layout="total,prev, pager, next"
              :current-page="form.page" @current-change="fanye" :page-size="form.pagesize"
              :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      UploadExcelComponent,
    },
    name: 'qudaoguanli',
    data() {
      return {
        form: {
          channel_id: this.$route.query.channel_id, //渠道id
          start_time: "", //开始时间
          end_time: "", //结束时间
          goods_name: "", //商品名称
          share_name: "", //分销商
          source: "", //来源
          page: 1,
          pagesize: 20,
        },
        times: [],
        loading: true,
        list: "",
        total: 0,
      }
    },
    created() {
      this.getlist()

    },
    methods: {
      daoru:function(r){
        if(r.reresults && r.reresults.length > 1000){
          this.$message.error('最多允许上传1000条');
        }else{
          let arr = []
          r.results.forEach(item=>{
            arr.push(item['订单ID'])
          })
          axios.post('/api/plan-market/upstream/channel/province-produce/pending/order/batch/process',{ids:arr})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('导入成功,成功操作了'+response.data.data.success+'条');
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }
      },
      xiazai:function(){
        location.href = 'https://file.storep.91haoka.cn/gantanhao/%E7%9C%81%E5%A4%96%E8%AE%A2%E5%8D%95%E9%98%9F%E5%88%97.xlsx?attname='
      },
      daochu:function(){
        location.href = location.origin + `/api/plan-market/upstream/channel/province-produce/pending/order/export?channel_id=${this.$route.query.channel_id}
        &start_time=${this.form.start_time}&end_time=${this.form.end_time}&goods_name=${this.form.goods_name}&share_name=${this.form.share_name}&source=${this.form.source}`


        // axios.get('/api/plan-market/upstream/channel/province-produce/pending/order/export', {
        //     params: this.form
        //   })
        //   .then(response => {
        //     if (response.data.msg.code == 0) {

        //     } else {
        //       this.$message.error(response.data.msg.info);
        //     }
        //   })
      },
      timeschange() {
        if (this.times != null) {
          this.form.start_time = this.times[0]
          this.form.end_time = this.times[1]
        } else {
          this.form.start_time = ''
          this.form.end_time = ''
        }
      },
      getlist: function() {
        axios.get('/api/plan-market/upstream/channel/province-produce/pending/order/list', {
            params: this.form
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },


      deletes: function(id) {
        this.$confirm('确定要提单操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/upstream/channel/province-produce/pending/order/resubmit', {
              order_id: id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  message: '操作成功！',
                  type: 'success'
                });
                this.loading = true
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      //翻页
      fanye: function(page) {
        this.loading = true
        this.form.page = page
        this.getlist()
      },

      //搜索
      search: function() {
        this.form.page = 1
        this.loading = true
        this.getlist()
      },
    }
  }
</script>


<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
</style>
